<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>list first</title>
    <!-- <link rel="stylesheet" href="/css/list1.css" type="text/css"> -->
    <style>
        #container {
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
            font-size: 20px;
            font-family: 'STXingkai';
            color: #43039fe3;
            max-width: 960px;
        }

        .line {
            display: flex;
            flex-direction: row;
            margin: 30px auto;
            padding: 5px;
            letter-spacing: 2px;
            position: relative;

        }

        .item {
            width: 100%;
        }

        .number {
            width: 50px;
            height: 50px;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: -20px;
            left: -15px;
            border: 2px #7aa6ee dashed;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            color: white;
            font-size: 30px;
            font-weight: 600;
            font-family: '黑体';
        }

        .content {
            box-shadow: 0px 0px 5px 5px rgba(7, 127, 234, 0.2);
            padding: 20px;
            border-radius: 10px;
            width: 100%;
            text-indent: 2em;
            line-height: 2em;
        }
    </style>
</head>

<body>
    <div id="container">
        <#list datas as value>
            <div class="line">
                <div class="item">
                    <div class="number">${data_index+1}</div>
                    <div class="content">
                        ${value}
                    </div>
                </div>
            </div>
        </#list>
    </div>
</body>

</html>